<head>
<title>Engagement Record</title>

<script>
	$(document).ready(
			function() {											
				$("#backToMain2").attr("defaultValue", "Back to Main");	
				
				var activityWarningDialog = new HnlDialogObj("#dialog-confirm-update");
				activityWarningDialog.buildDialog();
				activityWarningDialog.addDialogFunctions();
				
				var noSlectedWarningDialog = new HnlDialogObj("#dialog-no-activity-selected");
				noSlectedWarningDialog.buildDialog();
				noSlectedWarningDialog.addDialogFunctions();
				
				var deleteWarningDialog = new HnlDialogObj("#dialog-confirm-act");
				deleteWarningDialog.buildDialog();
				deleteWarningDialog.addDialogFunctions(function() {
					$(this).dialog("close");							
					$("#main").attr("action", "/hnl/DeleteActivity.do");
					$("#main").attr("method", "post");
					$("#main").submit();
				});
				

				$("#delActivity").click(function()  {
					var delAry=[];
					delAry=getCheckedArray("#personActListTemplate","tableCheckbox");
					if(delAry.length==0){
						noSlectedWarningDialog.dialogObj.dialog("open");
						return false;
					}
					deleteWarningDialog.dialogObj.dialog("open");
					
				});
								
				var ActTableRowFunction = function() {
					/* Get the position of the current data from the node */
					var actPos = personActListTemplate.fnGetPosition(this);
					/* Get the data array for this row */
					//alert(actPos);
					var actData = personActListTemplate.fnGetData(actPos[0]);
					if (actPos[1] != 0){
						$("#activityID").val(actData[5]);
						$("#description").val(actData[2]);
						$("#lastModifyDate").val(actData[3]);
						$("#lastModifyUser").val(actData[4]);						
						
						$("#activityTypeDropdown").children().each(function(){
						    if ($(this).text() == actData[1]){
						        $(this).attr("selected","true"); 
						    }
						});
						
						//set readonly
						$("#updateActButn").removeAttr("disabled");
						$("#addActButn").attr("disabled", "disabled");
					}
				};									
				
				
				$.getJSON("/hnl/PopulateDropdown.do?typeName=ACTIVITY_TYPE&isNA=NO",
						function(data) {
							setdropdown(data, "#activityTypeDropdown");
							//$("#activityTypeDropdown option[value='1']").remove();
						});

				$("#addActButn").click(function() {
					if(!isValidActivity()){
						activityWarningDialog.dialogObj.dialog("open");
						return false;
					}
					
					$("#main").attr("action", "/hnl/AddActivity.do");
					$("#main").attr("method", "post");
					$("#main").submit();
				});
				
				$("#updateActButn").click(function() {
					if(!isValidActivity()){
						activityWarningDialog.dialogObj.dialog("open");
						return false;
					}
					
					$("#activityID").removeAttr("disabled");
					$("#main").attr("action", "/hnl/UpdateActivity.do");
					$("#main").attr("method", "post");
					$("#main").submit();
				});
								
				$("#resetActButn").click(function()  {
					$("#updateActButn").attr("disabled", true);		
					$("#addActButn").removeAttr("disabled");
						
				});
				$("#backToMain2").click(function(evt) {
					evt.preventDefault();		
					window.top.location.href = "dashboard.jsp";					
				});
				
				//set default attr
				
				$("#updateActButn").attr("disabled", true);
				$("#activityID").attr("disabled", true);
				$("#lastModifyDate").attr("disabled", true);
				$("#lastModifyUser").attr("disabled", true);
				
				//select all checkbox
				$("#personActListTemplate input:checkbox[name='tableCheckbox']").click(function() {
		            var checkedStatus = this.checked;
		            $("#personActListTemplate input:checkbox").each(function() {
		                this.checked = checkedStatus;
		            });
		        });
				
				$.getJSON("/hnl/LoadpersonalActList.do?talentID=${param.talentID}", function(data) {
					personActListTemplate = updateTableTemplate(data, "#personalActList",
							"/hnl/template/activityListTableTemplate.jsp",
							"#personActListTemplate", false,
							ActTableRowFunction, "checkboxAll");
				});
				
				function isValidActivity(){
					var description = $.trim($("#description").val());
					if(description==""){
						return false;		
					}else{
						return true;	
					}
				}
				
			});
	
</script>
</head>
<body>
	<form id="main" accept-charset="UTF-8" >
		<fieldset class="mainFieldSet">
			<div>
				<!-- <img id="addTalent1" class="add" src="./images/add.png"></img>&nbsp;&nbsp; -->
				<img id="delActivity" name="delTalent" src="./images/del.png"></img>
			</div>	
			<legend class="mainLegend">Engagement Record List</legend>
			<div id="personalActList"></div>
		</fieldset>
		<fieldset class="mainFieldSet talentForm">
			<legend class="mainLegend">Engagement Record Update</legend>
			
			<table class="dispaly" >
				<tr style="display: none">
					<td>Engagement Record ID</td>
					<td><input type="text" id="activityID" name="activityID"
						size="30" />
				</tr>
				<tr>
					<td>Type</td>
					<td><select id="activityTypeDropdown"
						name="activityTypeDropdown">
					</select></td>
				</tr>
				<tr>
					<td>Description<em> *</em></td>
					<td><textarea id="description" name="description" rows="3" cols="50" class="expand100-200"></textarea>
					</td>
				</tr>				
				<tr>
					<td>Last Modify Date</td>
					<td><input id="lastModifyDate" name="lastModifyDate"
						type="text" size="30" /></td>
				</tr>
				<tr>
					<td>Last Modify User</td>
					<td><input id="lastModifyUser" name="lastModifyUser"
						type="text" size="30" /></td>
				</tr>
				<tr style="display:none">
					<td colspan='2'><input id="talentID" name="talentID" type="text"
						value="${param.talentID}" />
					</td>
				</tr>
				<tr>
					<td colspan="2"><input id="addActButn" type="button"
						value="ADD" /> <input id="updateActButn" name="updateActButn"
						type="button" value="UPDATE" /> <input id="resetActButn"
						name="resetActButn" type="reset" value="RESET" />
					</td>
				</tr>

			</table>
					
		</fieldset>
		<br/>
		<div>
			<input type=button id="backToMain2"/>
		</div>
	</form>
	<div id="dialog-confirm-act" title="Delete Activity">
		<p>
			<span class="ui-icon ui-icon-alert"
				style="float: left; margin: 0 7px 20px 0;"></span>Do you really want
			to delete Engagement(s) from the database?
		</p>
	</div>
	<div id="dialog-confirm-update" title="Missing Required Fields">
		<p>
			<span class="ui-icon ui-icon-alert"
				style="float: left; margin: 0 7px 20px 0;"></span>Activity type and
			description are required.
		</p>
	</div>
	<div id="dialog-no-activity-selected" title="Message">
		<p>
			<span class="ui-icon ui-icon-alert"
				style="float: left; margin: 0 7px 20px 0;"></span>No activity
			record(s) selected.
		</p>
	</div>
</body>